<template>
  <div>
    <div class="d-flex flex-row" v-for="item in newslist" :key="item.id">
      <div
        @click="$router.push({ name: 'news_show', params: { id: item.id } })"
        class="row d-flex m-1"
      >
        <div class="col-2 pr-2">
          <img :src="`${APIBaseURL}${item.img}`" width="50" height="50" />
        </div>
        <div class="col-10 d-flex flex-column justify-content-center">
          <div class="title ">{{ item.title }}</div>
          <div class="subtitle">
            <div class="time">发表时间：{{ item.add_time }}</div>
            <div class="count">点击：{{ item.count }}次</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {HTTPGetNewsList} from "@/api/news.js"
export default {
  data() {
    return {
      newslist: [], // 存放列表数据
    };
  },
  created() {
    // 调用方法
    this.getNewsList();
  },
  methods: {
    // 定义方法
    async getNewsList() {
      try {
        let result = await HTTPGetNewsList();
        if (result.code === 1) {
          this.newslist = result.data;    
          //console.log(this.newslist);       
        }
        else{
          throw result.msg;
        }
      } catch (error) {
        this.$messagebox("错误",error)
      }      
    },//=======================================
  },
};
</script>

<style lang="scss" scoped>
.title {
  font-size: 14px;  
  overflow:hidden;
  white-space: nowrap;
  text-overflow:ellipsis;
}
.subtitle{
  display: flex;  
  font-size: 12px;
  color: #26a2ff;  
}
.time{
  white-space: nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.count{
  width:30%
}

</style>
